<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: #ccc;
            color: #fff;
            text-align: center;
            font-size: 100px;
        }
    </style>

</head>

<body>
    <div class="box"></div>
    <script>
        const box = document.querySelector('.box')
        let i = 0
        const move = function () {
            box.innerHTML = i++
        }
        // 定时器版本的节流
        // 每隔500ms执行一次调用一次
        const throttle = (fn, ms = 0) => {
            let timerId
            return function (...args) {
                // 只有一个定时器在等待执行
                // 如果没有定时器，就开启一个
                if (!timerId) {
                    // 但是开启完一个之后，timerID变为了1
                    timerId = setTimeout(() => {
                        fn.call(this, ...args)
                        // 让定时器可以重新开启
                        timerId = null
                    }, ms)
                }
            }
        }
        box.addEventListener('mousemove', throttle(move, 1000))

        // 1. 函数调用()
        // 2. 函数的返回值return
        // 3. 箭头函数， 默认参数
        // 4. 闭包，作用域，作用域链
        // 5. 剩余参数，扩展运算符
        // 6. this指向，改变this指向，bind传参不会调用函数
        // 7. 定时器
        // 8. 时间戳



    </script>
</body>

</html>